<ion-header>

  <ion-toolbar>
    <ion-title>List Cards</ion-title>
  </ion-toolbar>

</ion-header>


<ion-content class="outer-content">

  <ion-card>

    <ion-list>

      <ion-list-header>
        Card List
      </ion-list-header>

      <button ion-item>
        <ion-icon name="cart" item-left></ion-icon>
        Shopping
      </button>

      <button ion-item>
        <ion-icon name="medical" item-left></ion-icon>
        Hospital
      </button>

      <button ion-item>
        <ion-icon name="paw" item-left></ion-icon>
        Dog Park
      </button>

    </ion-list>

    <button ion-item>
      <ion-icon name="heart" item-left></ion-icon>
      Single Item
    </button>

  </ion-card>

  <ion-card>

    <ion-list no-lines>

      <ion-list-header>
        Card List Without Lines
      </ion-list-header>

      <ion-item>
        <ion-icon name="wifi" item-left></ion-icon>
        <ion-label>Wifi</ion-label>
        <ion-toggle></ion-toggle>
      </ion-item>

      <ion-item>
        <ion-icon name="heart" item-left></ion-icon>
        Affection
        <ion-note item-right>
          Very Little
        </ion-note>
      </ion-item>

      <ion-item>
        <ion-icon name="home" item-left></ion-icon>
        Home
        <ion-note item-right>
          Where the heart is
        </ion-note>
      </ion-item>

    </ion-list>

  </ion-card>

  <ion-card>

    <ion-card-header>
      Card With Items (No List)
    </ion-card-header>

    <ion-item>
      <ion-icon name="wifi" item-left></ion-icon>
      <ion-label>Wifi</ion-label>
      <ion-toggle></ion-toggle>
    </ion-item>

    <ion-item>
      <ion-icon name="heart" item-left></ion-icon>
      Affection
      <ion-note item-right>
        Very Little
      </ion-note>
    </ion-item>

    <ion-item>
      <ion-icon name="home" item-left></ion-icon>
      Home
      <ion-note item-right>
        Where the heart is
      </ion-note>
    </ion-item>


  </ion-card>

</ion-content>
